<template>
    <div class="xwdtcontent">
        <div class="CenterBox">
            <TopTextSwitching width="70%" />
            <div class="xwdtFlex" style="margin-bottom: 15px;">
                <div style="flex-shrink: 0; width: calc(60% - 10px);margin-right: 10px;">
                    <div class="xwlbtBox">
                        <el-carousel height="400px" :interval="5000" arrow="always" @change="handleCarouselChange">
                            <el-carousel-item v-for="item in lbtImg" :key="item">
                                <img style="width: 100%;height: 100%;" :src="item.url" alt="" @click="xwItemClick(item.id)">
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div class="lbtTextBox">{{ currentTitle }}</div>
                </div>
                <div style="flex-shrink: 0; width: 40%;">
                    <xwdtList bgColor="#fff" title="新闻动态" :xwdtList="xwdtData"
                    @more-click="xwMoreClick"
                    @item-click="xwItemClick" ></xwdtList>
                </div>
            </div>
            <div class="xwdtFlex" style="margin-top: 20px;">
                <div style="flex: 1; flex-shrink: 0; width: calc(33.33% - 10px);">
                    <xwdtList title="合作协议" :xwdtList="hzyxData" 
                    @more-click="xwMoreClick"
                    @item-click="xwItemClick" ></xwdtList>
                </div>
                <div style="flex: 2; flex-shrink: 0; width: calc(66.66% - 10px);">
                    <xwdtList title="政策法规" :xwdtList="zcfgData" 
                    @more-click="xwMoreClick"
                    @item-click="xwItemClick" >
                        <template #top>
                            <img class="zcfgimg" src="@/assets/xinwen/zhengcefagui.png" alt="">
                        </template>
                    </xwdtList>
                </div>
            </div>
            <div class="xwdtFlex" style="margin-top: 20px;">
                <div style="flex: 1; flex-shrink: 0; width: calc(33.33% - 13px);">
                    <xwdtList title="市场动态" :xwdtList="scdtData"
                    @more-click="xwMoreClick"
                    @item-click="xwItemClick" ></xwdtList>
                </div>
                <div style="flex: 1; flex-shrink: 0; width: calc(33.33% - 13px);">
                    <img class="hzjzbgImg" src="@/assets/xinwen/hzjzbg.png" alt="">
                    <xwdtList title="合作进展报道" :xwdtList="hzjzbgData" 
                    @more-click="xwMoreClick"
                    @item-click="xwItemClick" ></xwdtList>
                </div>
                <div style="flex: 1; flex-shrink: 0; width: calc(33.33% - 13px);">
                    <xwdtList title="业务活动" :xwdtList="ywhdData" 
                    @more-click="xwMoreClick"
                    @item-click="xwItemClick" >
                        <template #top>
                            <img class="ywhdimg" src="@/assets/xinwen/xwzb.png" alt="">
                        </template>
                    </xwdtList>
                </div>
            </div>
            <div class="xwdtFlex" style="margin-top: 20px;">
                <div class="hyqsBox" style="flex: 1; flex-shrink: 0; width: calc(33.33% - 10px);">
                    <div class="hyqsBoxTitle" @click="xwMoreClick('行业趋势')">行业趋势</div>
                    <div class="hyqsListBox">
                        <div class="hyqsListForBox" v-for="item in hyqsData" :key="item.id" @click="xwItemClick(item.id)">
                            <div class="huidian"></div>
                            <div class="hyqsListForBox_text">{{ item.title }}</div>
                        </div>
                    </div>
                </div>
                <div class="jscxBox" style="flex: 2; flex-shrink: 0; width: calc(66.66% - 10px);">
                    <div class="jscxLfet">
                        <xwdtList title="技术创新" :xwdtList="jscxData" 
                        @more-click="xwMoreClick"
                        @item-click="xwItemClick"></xwdtList>
                    </div>
                    <div class="jscxRight">
                        <img class="jscxRightImg" src="/src/assets/xinwen/dibuxinwen.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import TopTextSwitching from "@/components/general/TopTextSwitching.vue";
import xwdtList from "@/components/general/xwdtList.vue";
import { queryNewsList } from "@/api/api.js";
import { ref, onMounted } from "vue";
import { useStore } from '@/store/store';
const store = useStore()
import { useRouter } from 'vue-router';
const router = useRouter();
const lbtImg = ref([]);
const xwdtData = ref([])
const zcfgData = ref([])
const hzyxData = ref([])
const scdtData = ref([])
const hzjzbgData = ref([])
const ywhdData = ref([])
const hyqsData = ref([])
const jscxData = ref([])
onMounted(() => {
    xwdtListfun()
    hzxyxwListfun()
    zcfgxwListfun();
    scdtxwListfun()
    hzjzbgxwListfun()
    ywhdxwListfun()
    hyqsxwListfun()
    jscxxwListfun()
});
const currentTitle = ref("");
// 轮播图切换事件
const handleCarouselChange = (currentIndex) => {
    currentTitle.value = lbtImg.value[currentIndex]?.title || "";
};
// 获取新闻动态数据
const xwdtListfun = async () => {
    const res = await queryNewsList({
        page: 1,
        limit: 8,
        new_type: '999'
    })
    lbtImg.value = res.data.map(item=>{
        return {
            id: item.id,
            title: item.title,
            url: store.imgfengMian + item.file_path
        }
    });
    currentTitle.value = lbtImg.value[0]?.title || "";
    xwdtData.value = res.data;
}
// 获取合作协议数据
const hzxyxwListfun = async () => {
    const res = await queryNewsList({
        page: 1,
        limit: 10,
        new_type: '005',
    })
    hzyxData.value = res.data;
}
// 获取政策法规数据
const zcfgxwListfun = async () => {
    const res = await queryNewsList({
        page: 1,
        limit: 5,
        new_type: '001',
    })
    zcfgData.value = res.data;
}
// 获取市场动态数据
const scdtxwListfun = async () => {
    const res = await queryNewsList({
        page: 1,
        limit: 10,
        new_type: '004',
    })
    scdtData.value = res.data;
}
// 获取合作进展报道数据
const hzjzbgxwListfun = async () => {
    const res = await queryNewsList({
        page: 1,
        limit: 5,
        new_type: '006',
    })
    hzjzbgData.value = res.data;
}
// 获取业务活动数据
const ywhdxwListfun = async () => {
    const res = await queryNewsList({
        page: 1,
        limit: 6,
        new_type: '002',
    })
    ywhdData.value = res.data;
}
// 获取行业趋势数据
const hyqsxwListfun = async () => {
    const res = await queryNewsList({
        page: 1,
        limit: 4,
        new_type: '003',
    })
    hyqsData.value = res.data;
}
// 获取技术创新数据
const jscxxwListfun = async () => {
    const res = await queryNewsList({
        page: 1,
        limit: 5,
        new_type: '007',
    })
    jscxData.value = res.data;
}
const xwMoreClick = (title) => {
    router.push({
        path: '/newsList',
        query: { title: title }
    })
}
const xwItemClick = (id) => {
    router.push({
        path: '/newsDetail',
        query: { id: id }
    });
}
</script>

<style scoped lang="scss">
.xwdtcontent {
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
    min-height: calc(100vh - 60px);
    background-color: #fff;
}

.xwdtFlex {
    display: flex;
    // align-items: center;
    gap: 20px;
}

.xwlbtBox {
    width: 100%;
    min-height: 100px;
    border-radius: 8px;
    overflow: hidden;

    /* 修改箭头样式 */
    :deep(.el-carousel__arrow) {
        background-color: rgba(0, 0, 0, 0.4) !important; // 使用项目绿色并提高不透明度
        color: white !important;
        width: 34px;
        height: 34px;
        font-size: 16px;

        &:hover {
            background-color: rgba(0, 0, 0, 0.8) !important; // 悬停时完全不透明
        }
    }
}

.lbtTextBox {
    text-align: center;
    margin: 5px 0;
    font-size: 14px;
    color: #1F1F1F;
}

.zcfgimg {
    width: 100%;
    height: 150px;
    margin: 10px 0;
}

.hzjzbgImg {
    width: 100%;
    height: auto;
}

.ywhdimg {
    width: 100%;
    height: auto;
    margin-top: 10px;
}

.hyqsBox {
    background: #f7f7f7;
    border-radius: 8px;

    .hyqsBoxTitle {
        font-weight: 400;
        font-size: 30px;
        color: #FFFFFF;
        padding: 20px;
        text-align: center;
        background: #0065B7;
        cursor: pointer;
    }

    .hyqsListBox {
        padding: 20px 30px;

        .hyqsListForBox {
            display: flex;
            align-items: center;
            padding: 8px 0;

            .huidian {
                width: 8px;
                height: 8px;
                background: #8C8C8C;
                border-radius: 50%;
                margin-right: 8px;
                flex-shrink: 0;
            }

            .hyqsListForBox_text {
                font-size: 14px;
                color: #1F1F1F;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;
                transition: color 0.3s ease;

                &:hover {
                    color: $green-color;
                }
            }
        }
    }
}

.jscxBox {
    display: flex;
    // align-items: flex-end;
    gap: 20px;
    background: #f7f7f7;
    padding: 0 30px;

    .jscxLfet {
        width: calc(50% - 10px);
    }

    .jscxRight {
        width: calc(50% - 10px);
        padding: 20px 0;
        display: flex;
        align-items: flex-end;

        .jscxRightImg {
            width: 100%;
        }
    }
}
</style>